<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>船舶：{{ detail ? detail.shipName : '--' }}</h1>
          <el-tag v-if="detail.state === 1" type="success"> {{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 2">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 3" type="warning">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 4" style="color: #dee2e6" color="gray">
            {{ detail.stateStr }}
          </el-tag>
          <el-tag v-if="detail.state === 5" type="info">{{ detail.stateStr }}</el-tag>
        </div>
        <div class="company-title-box__credit">订单号：{{ detail ? detail.orderNo : '--' }}</div>
      </div>
      <div class="company-title-box-btn">
        <el-button
          v-if="detail.state !== 4 && detail.state !== 5"
          type="info"
          plain
          style="color: #0a65f3; width: 120px"
          @click="handleUpdate(detail.id)"
        >
          编辑
        </el-button>
        <el-button
          v-if="detail.state === 2 && detail.state !== (4 || 5)"
          type="info"
          plain
          style="color: #fd7900; width: 120px"
          @click="handleUpdateState(detail.id)"
        >
          暂停
        </el-button>
        <el-button
          type="warning"
          plain
          size="mini"
          v-if="detail.state === 3 && detail.state !== (4 || 5)"
          @click="handleUpdateState(detail, 2)"
        >
          恢复
        </el-button>
        <el-button
          v-if="detail.state !== 4 && detail.state !== 5"
          type="info"
          plain
          style="color: #ff4949; width: 120px"
          @click="handleOver(detail.id)"
        >
          结束
        </el-button>
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item label="船舶名称">
          {{ detail.shipName }}
        </el-descriptions-item>
        <el-descriptions-item label="归属企业">
          {{ detail.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="船舶类型">
          {{ detail.shipTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="载货吨位">
          {{ detail.shipTonLevel }}
        </el-descriptions-item>
        <el-descriptions-item label="空船港">
          {{ detail.originPortName }}
        </el-descriptions-item>
        <el-descriptions-item label="目的港">
          {{ detail.destPortNames }}
        </el-descriptions-item>
        <el-descriptions-item label="可放空地点">
          {{ detail.pointNames }}
        </el-descriptions-item>
        <el-descriptions-item label="空船日期">
          {{ detail.originDate }}±{{ detail.floatingDays }}
        </el-descriptions-item>
        <el-descriptions-item label="运输类型">
          {{ detail.transportTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ detail.contacts }}
        </el-descriptions-item>
        <el-descriptions-item label="联系手机号">
          {{ detail.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ detail.remark ? detail.remark : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建方式">
          {{ detail.createTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人">
          {{ detail.createName ? detail.createName + '(' + detail.createPhone + ')' : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="更新人">
          {{ detail.updateName ? detail.updateName + '(' + detail.updatePhone + ')' : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ detail.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { batchUpdateStatus, getOrderShipDetail } from '@/api/orders/orderShip';

export default {
  data() {
    return {
      detail: {
        id: null, // id
        orderNo: '', // 订单号
        shipName: '', // 船舶名称
        shipTypeStr: '', // 船舶类型名称
        shipTonLevel: '', // 载货吨位
        originPortName: '', // 源港名称
        destPortNames: '', // 目的港名称
        pointNames: '', // 可放空地点名称
        originDate: '', // 源港日期
        floatingDays: '', // 浮动天数
        transportTypeStr: '', // 运输类型名称
        contacts: '', // 联系人
        contactPhone: '', // 联系手机号
        remark: '', // 备注
        createTypeStr: '', // 创建方式名称
        createName: '', // 创建人
        createPhone: '', // 创建人手机号
        createTime: '', // 创建时间
        updateName: '', // 更新人
        updatePhone: '', // 更新人手机号
        updateTime: '', // 更新时间
        state: null, // 状态
        stateStr: '', // 状态名称
      },
    };
  },
  mounted() {
    this.getOrderShipDetail();
  },
  methods: {
    // 获取船舶订单详情
    getOrderShipDetail() {
      getOrderShipDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
      });
    },
    /**
     * 编辑
     * @param id
     */
    handleUpdate(id) {
      this.$router.push({ name: 'OrdersShipSave', query: { id: id } });
    },
    /**
     * 暂停
     * @param id
     */
    handleUpdateState(id) {
      this.$confirm('确定将订单暂停？暂停后订单将不展示', '暂停', {
        confirmButtonText: '暂停',
      }).then(() => {
        batchUpdateStatus({ ids: id, state: '3' }).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getOrderProjectDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    /**
     * 结束
     * @param id
     */
    handleOver(id) {
      this.$confirm('确定当前订单已结束？切换结束后无法恢复', '结束', {
        confirmButtonText: '结束',
      }).then(() => {
        batchUpdateStatus({ ids: id, state: '4' }).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getOrderProjectDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
